<!---采购明细--->
<template>
  <div>
    <el-form-item>
      <el-button v-if="!disabled" type="primary" size="mini" plain @click="handleAdd">
        新增明细</el-button>
      <el-table v-if="tableData.length>0" :data="tableData" style="width: 100%" :border="true">
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemName }}</span>
            </div>
            <div v-else>
              <el-input
                v-model="scope.row.ItemName"
                placeholder="商品名称"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemSpec }}</span>
            </div>
            <div v-else>
              <el-input
                v-model="scope.row.ItemSpec"
                placeholder="规格"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="计价单位">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemUnit }}</span>
            </div>
            <div v-else>
              <el-input v-model="scope.row.ItemUnit" placeholder="计价单位" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemPrice }}</span>
            </div>
            <div v-else>
              <el-input v-model="scope.row.ItemPrice" placeholder="单价" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemNum }}</span>
            </div>
            <div v-else>
              <el-input v-model="scope.row.ItemNum" placeholder="数量" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <div v-if="!scope.row.Editing">
              <span>{{ scope.row.ItemMoney }}</span>
            </div>
            <div v-else>
              <el-input v-model="scope.row.ItemMoney" placeholder="自动计算" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!disabled"
          fixed="right"
          label="操作"
          align="center"
          width="100"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.Editing"
              size="mini"
              type="text"
              @click="handleUpdata(scope.row, scope.$index)"
            >编辑</el-button>
            <el-button
              v-if="!scope.row.Editing"
              size="mini"
              type="text"
              @click="handleDelete(scope.row, scope.$index)"
            >删除</el-button>
            <el-button
              v-if="scope.row.Editing"
              size="mini"
              type="text"
              @click="handleSava(scope.row, scope.$index)"
            >保存</el-button>
            <el-button
              v-if="scope.row.Editing"
              size="mini"
              type="text"
              @click="handleCancel(scope.row, scope.$index)"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: 'Billbuydetail',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      tmpObj: {},
      tableData: this.data,
      detailFormDrawer: false
    }
  },
  computed: {
    // ItemMoney: {
    //   get: function() {
    //     return this.tableData.map(
    //       row => (parseFloat(row.ItemPrice) * parseFloat(row.ItemNum)).toFixed(2))
    //   },
    //   set: function(newValue) {
    //     this.tableData.map(row => newValue)
    //   }
    // }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.tableData = this.data
      }
    }
  },
  methods: {
    handleAdd() {
      this.tableData = this.tableData || []
      this.tableData.push({
        ItemName: '',
        ItemSpec: '', // 规格
        ItemUnit: '',
        ItemPrice: 0,
        ItemNum: 0,
        ItemMoney: '',
        Editing: true
      })
    },
    // 修改
    handleUpdata(row, $index) {
      this.tableData[$index].Editing = true
      this.tableData[$index].ItemMoney = ''
      this.tmpObj = Object.assign({}, this.tableData[$index])
    },
    // 保存
    handleSava(row, $index) {
      if (row.ItemMoney === '') { this.tableData[$index].ItemMoney = (parseFloat(row.ItemPrice) * parseFloat(row.ItemNum)).toFixed(2) }
      this.tableData[$index].Editing = false
      this.$emit('updte:data', this.tableData)
    },
    handleCancel(row, $index) {
      this.tableData[$index].Editing = false
      this.tableData[$index].Editing = true
      this.tableData[$index] = Object.assign({}, this.tmpObj)
      this.tableData[$index].Editing = false
    },
    // 删除
    handleDelete(row, $index) {
      this.$confirm('确定要删除当前记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData.splice($index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: err
          })
        })
    }

  }
}
</script>
